<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
    
    <!--[if IE 6]>
    <style type="text/css">
    .ie6pngfix, .signKey-l, .signKey-c, .signKey-r, .signUBox, .signWord, .signPBox { behavior: url(script/iepngfix.htc) }
    </style> 
    <![endif]-->
    
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-17220419-1']);
        _gaq.push(['_trackPageview']);

        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>

</head>
<body class="pageBG0 h100">
    <table class="signTable" cellpadding="0" cellspacing="0">
        <tr><td class="signTop"></td></tr>
        <tr>
            <td valign="bottom" align="center">
                            <form action="/sign" method="post">
                                <div class="hide">
                                    <input type="text" id="name" name="name" />
                                    <input type="text" id="password" name="password" />
                                </div>
                                <div style="position: relative; width: 40px;">
                                    <input type="submit" value="sign" class="loginBtn" />
                                </div>
                            </form>
                <table cellpadding="0" cellspacing="0" width="932px">
                    <tr>
                        <td class="signKey-l" valign="top">
                        </td>
                        <td class="signKey-c">
                        <div style="width: 800px;">
                            <div class="signUBox ubox" style="margin-left: 20px;" id="xiad">
                                <center><div class="signJiu signWord" id="signJiu"></div></center>
                            </div>
                            <div class="signUBox ubox" style="margin-left: 60px;" id="daxu">
                                <center><div class="signSe signWord" id="signSe"></div></center>
                            </div>
                            <div class="signUBox ubox" style="margin-left: 130px;" id="ada">
                                <center><div class="signCai signWord" id="signCai"></div></center>
                            </div>
                            <div class="c"></div>
                        </div>
                        </td>
                        <td class="signKey-r"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <div class="signPRegion">
                    <div class="signPBox">
                        <div class="signPOuter">
                            <div class="signP signP-bg" id="a"></div>
                            <div class="signP signP-bg" id="b"></div>
                            <div class="signP signP-bg" id="c"></div>
                            <div class="signP signP-bg" id="d"></div>
                            <div class="signP signP-bg" id="e"></div>
                            <div class="signP signP-bg" id="f"></div>
                            <div class="signP signP-bg" id="g"></div>
                            <div class="signP signP-bg" id="h"></div>
                            <div class="signP signP-bg" id="i"></div>
                            <div class="signP signP-bg" id="j"></div>
                            <div class="signP signP-bg" id="k"></div>
                            <div class="signP signP-bg" id="l"></div>
                            <div class="signP signP-bg" id="m"></div>
                            <div class="signP signP-bg" id="n"></div>
                            <div class="signP signP-bg" id="o"></div>
                            <div class="signP signP-bg" id="p"></div>
                        </div>
                        <div class="c"></div>
                    </div>
                </div>
            </td>
        </tr>
        <tr><td class="signBottom"></td></tr>
    </table>
    
    
    <script type="text/javascript">
    
        var ie6pngfilter = '';
        
        window.addEvent('domready', function() {
            $$('.ubox').addEvents({
                'mousedown': function() {
                    $$('.ubox').each(function(item, index) {
                        SetSign(item, '');
                        ReSetSign(item, '');
                        
                        item.addEvents({
                            'mouseover': function() {
                                SetSign(this, '-c');
                            },
                            'mouseout': function() {
                                SetSign(this, '');
                            }
                        })
                    });
                    SetSign(this, '-c');
                    ReSetSign(this, '-p');
                    
                    $$('.signP').each(function(item, index) {
                        item.setProperty('class', 'signP signP-bg');
                    });
                    
                    $('name').set('value', this.getProperty('id'));
                    $('password').set('value', '');
                },
                'mouseover': function() {
                    SetSign(this, '-c');
                },
                'mouseout': function() {
                    SetSign(this, '');
                }
            });
            
            
            $$('.signP').addEvents({
                'mouseover': function() {
                    this.set('html', this.id);
                },
                'mouseout': function() {
                    this.set('html', '');
                },
                'mousedown': function() {
                    this.setProperty('class', 'signP');
                    $('password').setProperty('value', $('password').get('value') + this.id);
                }
            });
            
        });
        
        function SetSign(item, str)
        {
            sign = item.getElement('.signWord');
            sign.setProperty('class', sign.id + str + ' signWord');
        }
        
        function ReSetSign(item, str)
        {
            item.setProperty('class', 'signUBox' + str + ' ubox');
            item.removeEvents('mouseover');
            item.removeEvents('mouseout');
            if (str != "")
            {
                if (ie6pngfilter == '')
                {
                    ie6pngfilter = item.style.filter;
                }
                item.style.filter = '';
            }
            else if (ie6pngfilter != '')
                item.style.filter = ie6pngfilter;
        }
    </script>
</body>
</html>